<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>创意导航栏</title>
		<style>
			*{padding: 0;margin: 0;}
			#navDiv{width: 60%; margin: 10px auto;}
			#navDiv>ul>li{
				list-style: none;
				display: inline-block;
				width: 24%;
				height: 100px;
				background: gainsboro;
				text-align: center;
				
				margin-left: -5px;
				font-size: 25px;
			}
			#navDiv>ul>li:before{
				content: '/';
				display: block;
				color: gainsboro;
			}
			#navDiv>ul>li:after{
				content: '/';
			    color: gainsboro;
				display: block;
			}
			#navDiv>ul>li:hover>p,#navDiv>ul>li:hover:before,#navDiv>ul>li:hover:after{
				color: white;
				transform: rotate(5deg) scale(1.1);
			}
		</style>
	</head>
	<body>
		<div id="navDiv">
			<ul>
				<li><p>Home</p></li>
				<li><p>Detail</p></li>
				<li><p>History</p></li>
				<li><p>Contact</p></li>
			</ul>
		</div>

	</body>
</html>
